<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <!-- 

postMessage 是HTML5 XMLHttpRequest Level 2 中的 API，而且是为数不多可以跨域操作的 window 属性之一， 它可用于解决以下方面的问题；

a.) 页面和其打开的新窗口的数据传递
b.) 多窗口之间消息传递
c.) 页面与嵌套的 iframe 消息传递
d.) 上面三个场景的跨域数据传递

用法： postmessage(data, origin) 方法接受俩个参数
data : html5 规范支持任意基本类型或可复制的兑现，但部分浏览器只支持字符串，所以传参时最好用 JSON.string() 序列化。
origin: 协议 + 主机 + 端口号， 也可以设置为 "*",&#160; 表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

 -->

  <body>
    <iframe
      id="iframe"
      src="http://www.domain2.com/b.html"
      style="display: none"
    ></iframe>
    <script>
      var iframe = document.getElementById("iframe");
      iframe.onload = function () {
        var data = {
          name: "aym",
        };
        // 向domain2传送跨域数据
        iframe.contentWindow.postMessage(
          JSON.stringify(data),
          "http://www.domain2.com"
        );
      };

      // 接受domain2返回数据
      window.addEventListener(
        "message",
        function (e) {
          alert("data from domain2 ---> " + e.data);
        },
        false
      );
    </script>
  </body>
</html>
